<template>
  <el-card class="customer-table-card" shadow="never">
    <el-table
      ref="tableRef"
      :data="customers"
      v-loading="loading"
      row-key="id"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @sort-change="handleSortChange"
      class="customer-table"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="name" label="客户名称" min-width="150" sortable />
      <el-table-column prop="code" label="客户编码" width="120" />
      <el-table-column prop="contactPersons" label="联系人信息" width="200">
        <template #default="scope">
          <div v-if="scope.row.contactPersons && scope.row.contactPersons.length > 0">
            <div v-for="(contact, index) in scope.row.contactPersons.slice(0, 2)" :key="contact.id || index">
              <div class="contact-item">
                <span class="contact-name">{{ contact.name }}</span>
                <span class="contact-phone">{{ contact.phone }}</span>
                <el-tag v-if="contact.isPrimary" size="small" type="success">主</el-tag>
              </div>
            </div>
            <div v-if="scope.row.contactPersons.length > 2" class="more-contacts">
              还有 {{ scope.row.contactPersons.length - 2 }} 个联系人
            </div>
          </div>
          <div v-else>
            无联系人信息
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="lastOrderDate" label="最近订单" width="120" sortable>
        <template #default="scope">
          <div v-if="scope.row.lastOrderDate">
            {{ formatDate(scope.row.lastOrderDate) }}
          </div>
          <div v-else>
            -
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderCount" label="订单数" width="100" sortable>
        <template #default="scope">
          <div>
            {{ scope.row.orderCount !== null && scope.row.orderCount !== undefined ? scope.row.orderCount : '-' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" sortable>
        <template #default="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-dropdown trigger="click" @command="(command) => handleCommand(command, scope.row)">
            <el-button link>
              <el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="{action: 'detail', row: scope.row}">
                  <el-icon><Document /></el-icon>详情
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'edit', row: scope.row}">
                  <el-icon><Files /></el-icon>编辑
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'orders', row: scope.row}">
                  <el-icon><DataAnalysis /></el-icon>销售订单
                </el-dropdown-item>
                <el-dropdown-item :command="{action: 'delete', row: scope.row}" divided>
                  <el-icon><Delete /></el-icon>删除客户
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
// @ts-nocheck
import { 
  Sort, Setting, Document, Files, DataAnalysis, 
  TrendCharts, Delete, ArrowDown 
} from '@element-plus/icons-vue'
import { ref } from '@vue/runtime-core'

interface ContactPerson {
  id?: string
  name: string
  department?: string
  position?: string
  phone?: string
  email?: string
  address?: string
  isPrimary?: boolean
  remark?: string
}

interface Customer {
  id: number
  name: string
  code: string
  contactPersons: ContactPerson[]
  status: number
  lastOrderDate: string | null
  orderCount: number
  createdAt: string
  updatedAt: string
}

interface Pagination {
  page: number
  limit: number
  total: number
}

const props = defineProps<{
  customers: Customer[]
  loading: boolean
  pagination: Pagination
  selectedCustomers: Customer[]
}>()

const emit = defineEmits<{
  (e: 'selection-change', selection: Customer[]): void
  (e: 'row-click', row: Customer): void
  (e: 'sort-change', sort: { column: any, prop: string, order: string }): void
  (e: 'size-change', size: number): void
  (e: 'current-change', page: number): void
  (e: 'command', command: { action: string, row: Customer }): void
}>()

const tableRef = ref()

// 格式化日期
const formatDate = (date: string | null) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

// 事件处理
const handleSelectionChange = (selection: Customer[]) => {
  emit('selection-change', selection)
}

const handleRowClick = (row: Customer) => {
  emit('row-click', row)
}

const handleSortChange = (sort: { column: any, prop: string, order: string }) => {
  emit('sort-change', sort)
}

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleCurrentChange = (page: number) => {
  emit('current-change', page)
}

const handleCommand = (command: { action: string, row: Customer }, row: Customer) => {
  emit('command', command)
}
</script>

<style scoped>
.customer-table-card {
  border-radius: 8px;
  overflow: hidden;
}

.customer-table {
  width: 100%;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.contact-name {
  font-weight: 500;
}

.contact-phone {
  color: #909399;
  font-size: 12px;
}

.more-contacts {
  color: #409eff;
  font-size: 12px;
  margin-top: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>